Functional Component

函数组件

创建
- 在SRC目录中，创建一个 xxx.jsx 的文件，就是要创建一个组件
- 我们在此文件中，创建一个函数，让函数返回JSX视图或者JSX元素virtualDOM虚拟DOM对象
- 这就是创建了一个“函数组件”!!

调用

基于ES6Module规范，导入创建的组件忽略jsx后缀名，然后像写标签一样调用这个组件即可!!

    //单闭合调用
    <Component/> 
    // 双闭合调用命名:组件的名字，
    // 我们一般都采用PascalCaser大驼峰命名法，这种方式
    <Component>...</Component> 

命名
- 调用组件的时候，我们可以给调用的组件设置(传递)各种各样的属性
```
<Demo
    title="我是标题" 
    x={10} 
    data={[100，200]} 
    className="box" 
    style={{fontSize:'20px'}} 
/>
```
- 如果设置的属性值不是字符串格式，需要基于“{}语法”进行嵌套
- 调用组件的时候，我们可以把一些数据/信息基于属性props的方式，传递给组件!!

渲染机制

基于babel-preset-react-app把调用的组件转换为createElement格式

React.createElement(DemoOne，{
    title: "Here is a title",
    x:10,
    data: [100，200],
    className:"box",
    style: {
    fontSize:'20px'}
})

把createElement方法执行，创建出一个virtualDOM对象!!

{
    $$typeof: Symbol(react.element),
    key: null,
    //如果有节点[双闭合调用]，则也包含children!!
    props: { 
        title:'我是标题',
        x: 10,
        data: [ 1, 2, 3 ],
        className:'box',
        style: {
            fontSize:'20px'
        },
        ref: null,
        type: DemoOne
    }
}

在父组件上，基于root.render把virtualDOM变为真实的DOM
- type值不再是一个字符串，而是一个函数了，此时:
  - 把函数执行-> DemoOne()
  - 把virtualDOM中的props，作为实参传递给函数 -> Demo0ne(props)
  - 接收函数执行的返回结果，也就是当前组件的virtualDOM对象
  - 最后基于render把组件返回的虚拟DOM变为真实DOM，插入到#root容器中!!

函数组件​

渲染机制​

函数组件

渲染机制